import 'package:flutter/material.dart';

class LoanDetail extends StatelessWidget {
  final TextStyle _fieldKey = TextStyle(color: Color(0xFF666666), fontSize: 16);
  final TextStyle _fieldVal = TextStyle(
      color: Color(0xFF101010), fontSize: 18, fontWeight: FontWeight.w400);

  static final Map _loanInfo = {
    'Loan amount': '₹ 4,133.00',
    'Loan term': '14 Days',
    'Amount recevied': '₹ 2,800.00',
    'Processing fee': '₹ 399.00',
    'GST (18% on Processing fee)': '₹ 61.00',
    'Loan date': '2019-12-23',
    'Due date': '2018-23-23',
  };

  static final Map _paymentInfo = {
    'Amount repaid': '₹ 4,133.00',
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 0,
        title: Text('Loan Detail'),
      ),
      body: Padding(
        padding: EdgeInsets.all(10),
        child: ListView(
          children: <Widget>[
            _renderBankCard(context),
            _renderGroupInfo(context, 'Loan Info', _loanInfo),
            _renderGroupInfo(context, 'Repayment Info', _paymentInfo),
          ],
        ),
      ),
    );
  }

  Container _renderBankCard(BuildContext context) {
    return Container(
      height: 145,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        // image: DecorationImage(
        //   image: AssetImage("images/bg.jpg"),
        //   fit: BoxFit.cover,
        // ),
        borderRadius: BorderRadius.all(Radius.circular(8)),
        gradient: new LinearGradient(
          begin: FractionalOffset.centerLeft,
          end: FractionalOffset.centerRight,
          colors: [
            Color(0xFF3666F8),
            Color(0xFF0DBBFF),
          ],
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Text(
            'Repayment Amount',
            style: TextStyle(color: Colors.white, fontSize: 14),
          ),
          Text(
            '₹ 1400.00',
            style: TextStyle(color: Colors.white, fontSize: 38),
          ),
          Text(
            'Due day 2019-02-22',
            style: TextStyle(color: Colors.white, fontSize: 18),
          )
        ],
      ),
    );
  }

  Container _renderGroupInfo(
      BuildContext context, String title, Map listItemData) {
    return Container(
      padding: EdgeInsets.only(left: 17, right: 17, top: 11, bottom: 11),
      margin: EdgeInsets.only(top: 12),
      decoration: BoxDecoration(
          color: Color(0xFFF8F9FC),
          borderRadius: BorderRadius.all(Radius.circular(14))),
      width: MediaQuery.of(context).size.width,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: getGroupInfoItem(title, listItemData),
      ),
    );
  }

  List<Widget> getGroupInfoItem(String title, Map listItemData) {
    final List<Widget> children = [
      Padding(
        padding: EdgeInsets.only(bottom: 5),
        child: Text(title,
            style: TextStyle(
                color: Color(0xFF101010),
                fontSize: 18,
                fontWeight: FontWeight.w700)),
      )
    ];
    listItemData.forEach((k, v) => {children.add(_renderSingleField(k, v))});

    return children;
  }

  Padding _renderSingleField(String key, String vallue) {
    return Padding(
        padding: EdgeInsets.only(top: 8),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text(
              key,
              style: _fieldKey,
            ),
            Text(
              vallue,
              style: _fieldVal,
            )
          ],
        ));
  }
}
